<template>

 <div class="recommend">
          <span>火爆推荐</span>
          <ul>
            <li v-for="item in recommendListData" :key="item.id">
              <img :src="item.imgUrl" alt="" />

              <div>
                <h3>{{ item.name }}</h3>
                <p>{{ item.content }}</p>
                <span>￥{{ item.price }}</span>
              </div>
            </li>
          </ul>
        </div>
 
</template>

<script setup>
import {ref,reactive,defineProps} from "vue"
const props = defineProps({
recommendListData: Object
})




</script>

<style lang="scss" scoped>
  .recommend {
    font-size: 18px;
    text-align: center;
    margin-top: 20px;
    span {
      margin-top: 30px;
      font-size: 20px;
      font-weight: 700;
    }
    ul {
      margin-top: 20px;
      li {
        position: relative;
        height: 170px;

        img {
          width: 100%;
          height: 165px;
          object-fit: cover;
        }

        div {
          position: absolute;

          right: 10px;
          bottom: 20px;
          display: flex;
          flex-direction: column;
          justify-content: end;
          span {
            color: red;
            margin-top: 30px;
            margin-left: 50px;
          }
        }
      }
    }
  }
</style>